<template>
    <!-- 文件管理界面 -->
    <ContentPanel v-loading="copying" element-loading-text="正在复制文件" :showTopBorder="false">
        <el-form label-position="top" :model="formData" :rules="rules" ref="formDataRef" label-width="80px"
            @submit.prevent>
            <el-form-item label="文件管理" prop="" class="file-manage">
                <div class="file-input" :title="formData.sysSetting">{{ formData.sysSetting || '/' }}</div>
                <div class="tips">文件的默认保存位置</div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="changeFileFolder">更改</el-button>
                <el-button type="primary" @click="openFileFolder">打开文件夹</el-button>
            </el-form-item>
        </el-form>
    </ContentPanel>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch, onMounted, onUnmounted } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

/* 是否正在拷贝缓存文件 */
const copying = ref(false);

const formData = ref({});
const formDataRef = ref();
const rules = {
    title: [{ required: true, message: "请输入内容" }],
};

myApi.onCopying((event, data) => {
    copying.value = true;
})

const changeFileFolder = async () => {
    // 因为需要在主进程确认用户选择了不同的文件夹、开始传输文件的时候才让渲染进程设置copying.value = true显示传输文件的动画
    // 所以不是在这里设置copying.value = true，否则点击选择的时候就会直接显示正在拷贝文件的动画了，而想要的效果是选好文件夹路径、主进程开始复制的时候才显示动画
    // copying.value = true;
    await myApi.changeFileFolder()
    copying.value = false;
    await getFileFolder();
}

const openFileFolder = () => {
    myApi.openFileFolder()
}

const sysSetting = ref({});

/* 获取本地数据库保存的文件夹路径 */
const getFileFolder = async () => {
    let userSetting = await myApi.getUserSetting()
    sysSetting.value = JSON.parse(userSetting.sysSetting) || {};
    formData.value = {
        sysSetting: sysSetting.value.fileFolder,
    };
}

onMounted(async () => {
    await getFileFolder();
})
onUnmounted(() => {
    myApi.removeAllListeners('copying');
})
</script>

<style lang="scss" scoped>
.file-manage {
    :deep(.el-form-item__content) {
        display: block;
    }

    .file-input {
        background: #fff;
        padding: 0 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
    }

    .tips {
        color: #888888;
        font-size: 13px;
    }
}
</style>
